<template>
  <form class="shop-card-container" @submit.prevent="onSubmit">
    <div class="shop-card">
      <button class="shop-btn-close clickable" @click.prevent="goBack">&times;</button>
      <img class="shop-img" :src="imgSrc"> <!-- must be 200*200 -->
      <div class="main-content">
        <span class="shop-link">
          <slot name="link"></slot>
        </span>
        <div class="shop-price">
          ${{ price }}
        </div>
        <div class="shop-body">
          <slot name="body"></slot>
        </div>
        <button class="shop-btn-buy clickable" @click="addToChart">Add to chart</button>
      </div>
    </div>
  </form>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: "ShopCard"
})
</script>
<script setup lang="ts">
import { toRefs, onActivated } from "vue"
import { useRouter } from "vue-router"
import { useStore } from "../store/main"
const props = defineProps<{
  price: string | number,
  imgSrc: string,
  id: number
}>()
const router = useRouter()
const store = useStore()
let { price, imgSrc, id } = toRefs(props);
function addToChart() {
  store.commit("buyNewThings", id.value)
  router.back()
}
function onSubmit() {}
function goBack() {
  router.back()
}
</script>

<style scoped lang="less">
@import "../vars";
.shop-card {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  background-color: #FFF;
  padding: 2em;
  border-radius: 2em;
  overflow: hidden;
  box-shadow: 1em 1em 1em @gray-100;
  position: relative;
}
.main-content {
  display: flex;
  flex-direction: column;
}
.shop-price {
  color: @cyan-600;
  font-size: 1.5em;
  margin-bottom: 0.25em;
}
.shop-img {
  width: 200px;
  height: 200px
}
.shop-card-container {
  display: flex;
}
.shop-link {
  font-size: 2em;
}
.shop-body {
  margin-bottom: 0.5em;
}
.shop-btn-buy {
  display: block;
  border: none;
  font-size: 1.5em;
  font-family: inherit;
  padding: 0.5em;
  border-radius: 0.5em;
  background-color: @gray-300;
  cursor: pointer;
  margin-right: auto;
}
.shop-btn-buy:hover {
  background-color: @gray-200;
}
.shop-btn-close {
  position: absolute;
  top: 2em;
  right: 2em;
  line-height: 1;
  border: none;
  border-radius: 50%;
  padding: 0.5em;
  cursor: pointer;
}
</style>